<script setup lang="ts">

import {Delete, Edit} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {reqRemoveUser} from "@/api/user";
import {ElMessage} from "element-plus";

let $useRoute = useRoute();
let $useRouter = useRouter();
let props = defineProps(['patient', 'index', 'currentIndex'])
let $emit = defineEmits(['changeScene','removeUser']);
const handler = ()=>{
  if($useRoute.path=='/user/patient'){
    $emit('changeScene',props.patient)
  }else{
  $useRouter.push({path:'/user/patient',query:{type:'edit',id:props.patient.id}})
  }
}
const removeUser=async ()=>{
  try{
    await reqRemoveUser(props.patient.id);
    $emit('removeUser')
    ElMessage({
      type:'success',
      message:'删除成功'
    })
  }catch (error){
    ElMessage({
      type:'error',
      message:'删除失败'
    })
  }

}
</script>

<template>
  <div class="visitor">
    <div class="top">
      <div class="left">
        <span class="free">{{ patient.isInsure == 1 ? '医保' : '自费' }}</span>
        <span class="username">{{ patient.name }}</span>
      </div>
      <div class="right">
        <el-button type="primary" size="default" :icon="Edit" @click="handler"></el-button>
<!--        <el-button v-if="$useRoute.path=='/user/patient'" type="danger" size="default" :icon="Delete"></el-button>-->
<!--        <el-popconfirm @confirm="removeUser" :title="`你确定要删除${patient.name}吗？`" width="200px">
          <template #reference>
            <el-button v-if="$useRoute.path=='/user/patient'" type="danger" size="default" :icon="Delete"></el-button>
          </template>
        </el-popconfirm>-->
        <slot name="otherBtn" > </slot>
      </div>
    </div>
    <div class="bottom">
      <p>证件类型:{{ patient.param.certificatesTypeString }}</p>
      <p>证件号码:{{ patient.certificatesNo }}</p>
      <p>用户性别:{{ patient.sex == 0 ? '女生' : '男士' }}</p>
      <p>出生日期:{{ patient.birthdate }}</p>
      <p>手机号码:{{ patient.phone }}</p>
      <p>婚姻状况:{{ patient.isMarry == 0 ? '未婚' : '已婚' }}</p>
      <p>当前住址:{{ patient.param.cityString }}</p>
      <p>详细地址:{{ patient.param.fullAddress }}</p>
      <transition name="confirm">
        <div class="confirm" v-if="index===currentIndex">已选择</div>
      </transition>
    </div>
  </div>
</template>

<style scoped lang="scss">
.visitor {
  .top {
    height: 60px;
    background: #e5e5e5;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .left {
      .free {
        background: white;
        padding: 5px;
        font-size: 12px;
        margin-right: 10px;
        border-radius: 10px;
      }

      .username {
        color: #7f7f7f;
      }
    }
  }

  .bottom {
    padding-left: 50px;
    position: relative;

    p {
      line-height: 40px;
    }

    .confirm {
      position: absolute;
      width: 200px;
      height: 200px;
      color: red;
      border-radius: 50%;
      border: 1px dashed red;
      text-align: center;
      line-height: 200px;
      left: 20%;
      top: 20%;
      opacity: 0.5;
      transform: rotate(35deg);
      font-weight: 900;
    }

    .confirm-enter-from {
      transform: scale(1);
    }

    .confirm-enter-active {
      transition: all;
    }

    .confirm-enter-to {
      transform: scale(1.2);
    }
  }
}
</style>
